<template>
  <el-card
    class="box-card"
    :style="{backgroundColor:bg_color}"
  >
    <el-row :gutter="10">
      <el-col :span="14">
        <div class="card-title">
          <div class="c-title">{{ card_title }}</div>         
          <div class="c-value">{{ value }}</div>
        </div>
      </el-col>
      <el-col :span="10">
          <img           
            class="icon-class"
            :src="require('@/assets/home_page/' + image)"
          />        
      </el-col>
    </el-row>
    </div>
  </el-card>
</template>
<style scoped>
.box-card {
  border-radius: 10px;
}
.card-title {
  position:relative;
  color: white;
  text-align: left; 
  margin-top: 5%;
  margin-left: 7%;
}
.c-title {
  font-size: 60%;
  text-align:left;
  word-spacing: 2px;
  /* 让鼠标不能选中 */
  user-select: none;
  overflow:hidden;               /*  内容超出宽度时隐藏超出部分的内容 */
  text-overflow:ellipsis;         /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
.c-value {
  width: 70%;
  font-size: 120%;
  text-align:left;
  /* 让鼠标不能选中 */
  user-select: none;
}
.icon-class {
  position:relative;
  width: 50%;
  height: 50%;
  margin-top: 5%;
  margin-right: 18px;
  margin-left: 50%;
  /* 让鼠标不能选中 */
  user-select: none;
}

</style>
<script>
export default {
  props: {
    card_title: String,
    value: String,
    type: Number,
    card_icon: String
  },
  model: {
      prop: ['value', 'card_title'],
      event: 'update'
  },
  data() {
    return {};
  },
  computed: {
    bg_color() {
      if (this.type === 1) {
        return "#14d288";
      } else if (this.type === 2) {
        return "#ffd250";
      } else if (this.type === 3) {
        return "#4696ff";
      } else if (this.type === 4) {
        return "#ff5082";
      } else if (this.type == 5) {
        return "#e66ef0";
      } else if (this.type == 6) {
        return "#50d2ff";
      }
      return "gray";
    },
    image() {
      if (this.type === 1) {
        return "beer.png"
      } else if (this.type === 2) {
        return "heat.png"
      } else if (this.type === 3) {
        return "water.png"
      } else if (this.type === 4) {
        return "electricity.png"
      } else if (this.type == 5) {
        return "co2.png"
      } else if (this.type == 6) {
        return "air.png"
      }
    }
  },
  mounted() {
    
  }
};
</script>
